<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>所有饮品——综合</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/home/game.css" />
	</head>

	<body>
		<div class="mui-content" id="app" style="background: #FFFFFF;">
			<!--游戏选项卡-->
			<div class="select_div">
				<a id="add-tab" class=" mui-icon mui-icon iconfont icon-ai225">
				</a>
				<div id="scroll-wrapper" class="mui-slider-indicator mui-segmented-control mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" value="zhaodong1">
							所有资讯
						</a>
						<a id="item2" class="mui-control-item">
							炉石传说
						</a>
						<a class="mui-control-item">
							腾讯游戏
						</a>
						<a class="mui-control-item">
							绝地求生
						</a>
						<a class="mui-control-item">
							英雄联盟
						</a>
						<a class="mui-control-item">
							吃鸡
						</a>
						<a class="mui-control-item">
							吃鸡ing
						</a>
					</div>
				</div>
			</div>
			<!--游戏选项卡结束-->

			<!--轮播-->
			<div class="game_scroll mui-media" style="padding: 0 15px;">
				<div id="slider" class="mui-slider">
					<div id="aa" class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img class="sliderImg" src="img/q.jpg">
								<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡4</p>
							</a>
						</div>
						<!--<div  class="mui-slider-item">
							<a href="#">
								<img src="img/q.jpg">
								<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡1</p>
							</a>
						</div>-->
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img class="sliderImg" src="img/q.jpg">
								<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡1</p>
							</a>
						</div>
					</div>

					<div class="mui-slider-indicator mui-text-right">
						<div class="mui-indicator mui-active"></div>
						<!--<div class="mui-indicator"></div>
						-->
					</div>
				</div>
			</div>
			<!--主体-->
			<div id="content" class="mui-slider" style="padding: 0 15px;">

				<div class="liset_div show">
					<div class="game_pic">
						<img class="gamePic_atv" src="http://zhihuiyuan.oss-cn-beijing.aliyuncs.com/RsRc4Aar3E.jpg" />
					</div>
					<div class="new_title">
						资讯
					</div>
					<div class="list_card">
						<ul class="mui-table-view" id="ul_tab_view">
							<!--<li class="mui-table-view-cell mui-media">
								<img class="mui-media-object mui-pull-right" src="img/cbd.jpg">
								<div class="mui-media-body">
									<div class="gameTile mui-ellipsis-2 mui-ellipsis-2" >
										炉石传说：国服登顶恶毒鱼人其卡组国服登顶恶毒鱼人其卡组国服登顶恶毒鱼人其卡组
									</div>
									<div class="gamebtn_viewTime">
										<button class='mui-pull-left'>炉石传说</button>
										<p class='mui-ellipsis mui-pull-right'>1.2k次查看</p>
										<div style="clear: both;"></div>
									</div>
								</div>
							</li>-->
						</ul>
					</div>
				</div>
				<div class="liset_div hide">

					<div class="game_pic">
						<img src="../../img/b.jpg" />
					</div>

					<div class="list_card">
						<ul class="mui-table-view">
						</ul>
					</div>
				</div>
				<div class="liset_div hide">

					<div class="game_pic">
						<img src="../../img/benefit2.jpg" />
					</div>

					<div class="list_card">
						<ul class="mui-table-view">

						</ul>
					</div>
				</div>
				<div class="liset_div hide">

					<div class="game_pic">
						<img src="../../img/a.jpg" />
					</div>

					<div class="list_card">
						<ul class="mui-table-view">

						</ul>
					</div>
				</div>
				<div class="liset_div hide">

					<div class="game_pic">
						<img src="../../img/benefit3.jpg" />
					</div>

					<div class="list_card">
						<ul class="mui-table-view">

						</ul>
					</div>
				</div>
				<div class="liset_div hide">
					<div class="game_pic">
						<img src="../../img/a.jpg" />
					</div>
					<div class="list_card">
						<ul class="mui-table-view">

						</ul>
					</div>
				</div>
				<div class="liset_div hide">
					<div class="game_pic">
						<img src="../../img/q.jpg" />
					</div>

					<div class="list_card">
						<ul class="mui-table-view">

						</ul>
					</div>
				</div>
			</div>
			<div class="view_more">
				<button>查看更多</button>
			</div>
		</div>

		<!--jquery-->
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<!--mui-->
		<script src="../../js/mui.min.js"></script>
		<!--自建的js-->
		<script type="text/javascript" src="../../js/home/game.js"></script>
		<!--轮播模块-->
		<script type="text/html" id="srcList">
			<div class="mui-slider-item">
				<a href="#">
					<img class="sliderImg" src="{{scrPic}}">
					<p class="mui-slider-title">{{srcTitle}}</p>
				</a>
			</div>
		</script>
		<!--资讯模块-->
		<script type="text/html" id="game_list">
			<li class="mui-table-view-cell mui-media">
				<img class="mui-media-object mui-pull-right" src="{{gamePic}}">
				<div class="mui-media-body">
					<div class="gameTile mui-ellipsis-2 mui-ellipsis-2">
						{{game_title}}
					</div>
					<div class="gamebtn_viewTime">
						<button class='mui-pull-left'>{{game_name}}</button>
						<p class='mui-ellipsis mui-pull-right'>{{view_count}}</p>
						<div style="clear: both;"></div>
					</div>
				</div>
			</li>
		</script>
		<script>
			mui.init();
			var main = null;
			var gameList = []; //定义游戏的数据列表数组变量
			var scrollPic = []; //定义游戏的轮播数据列表数组变量
			var docs = []; //定义游戏轮播指示灯数组变量
			var NewsPic = "";
			mui.getJSON('../../json/newsGame.json', {
					category: 'news'
				}, function(data) {
					if (data.NewsPic) {
						NewsPic = data.NewsPic;
						console.log("NewsPic=="+NewsPic);
					}
					if(data.gameList) {
						gameList = data.gameList;
						console.log("gameList===:" + gameList);
						var listStr = ""; //定义资讯数据列表变量
						var title = ""; //定义游戏标题变量
						var gameName = ""; //定义游戏名字变量
						var gamePic = ""; //定义游戏图片变量
						var game_view_time = ""; //定义游戏查看量变量
						for(var i = 0; i < gameList.length; i++) {
							title = gameList[i].game_title; //接收请求出来的游戏标题
							gameName = gameList[i].gameNmae_btn; //接收请求出来的游戏名字
							gamePic = gameList[i].pic; //接收请求出来的游戏图片
							game_view_time = gameList[i].game_view_time; //接收请求出来的游戏查看量
							console.log("title===:" + title);
							listStr += del_html_tags($("#game_list").html(), "{{game_title}}", title); //将游戏标题填充
							listStr = del_html_tags(listStr, "{{game_name}}", gameName); //将游戏名字填充
							listStr = del_html_tags(listStr, "{{gamePic}}", gamePic); //将游戏图片填充
							listStr = del_html_tags(listStr, "{{view_count}}", game_view_time); //将游戏查看量填充
						}
						$("ul.mui-table-view").append(listStr); //最后将填充玩成后追加到ul.mui-table-view的元素里面
						alert($("ul.mui-table-view > li").length);
						$("ul.mui-table-view").on('tap','li',function(){
							mui.openWindow({
								url:"index-article.html",
								id:"index-article.html",
								extras:{
									game_list_id:"game_list_id"
								}
							})
						})

					}
					if(data.scrollPic) {
						scrollPic = data.scrollPic;
						//取头和尾
						var oSrcFL = $("div.mui-slider-item.mui-slider-item-duplicate:first-child"); //轮播的第一张
						var oSrcLast = $("div.mui-slider-item.mui-slider-item-duplicate:last-child"); //轮播的最后一张
						console.log("mui-slider-item mui-slider-item-duplicate==:" + oSrcFL.length);
						var srcList = ""; //定义轮播的数据量
						var srcUrl = ""; //定义轮播的图片数
						var srcWord = ""; //定义轮播图片标题数
						for(var i = 0; i < scrollPic.length; i++) {
							srcUrl = scrollPic[i].src; //接收图片地址
							srcWord = scrollPic[i].word; //接收图片标题
							srcList += del_html_tags($("#srcList").html(), "{{scrPic}}", srcUrl); //将图片填充（注$("#srcList").html()是获取id为srcList里的HTML）
							srcList = del_html_tags(srcList, "{{srcTitle}}", srcWord); //将图片标题填充
							//轮播的最后一张和第一张
							$("div.mui-slider-item.mui-slider-item-duplicate:first-child img").attr('src', scrollPic[0].src); //将轮播的第一张轮播的图片替换
							$("div.mui-slider-item.mui-slider-item-duplicate:first-child p").text(scrollPic[0].word); //将轮播的第一张张轮播的图片标题替换
							$("div.mui-slider-item.mui-slider-item-duplicate:last-child img").attr('src', scrollPic[scrollPic.length - 1].src); //将轮播的最后张轮播的图片替换
							$("div.mui-slider-item.mui-slider-item-duplicate:last-child p").text(scrollPic[scrollPic.length - 1].word); //将轮播的最后张轮播的图片标题替换
						}
						oSrcFL.after(srcList); //最后将填充完毕的追加到轮播第一张的后面（注mui轮播框架另外加的第一张和最后一张）
						//点击轮播图跳转
						$("#slider").on("tap",".sliderImg",function(){
							mui.openWindow({
								url:"index-article.html",
								id:"index-article.html",
								extras:{
									game_newsImg_id:"game_newsImg_id"
								}
							});
						})

						//轮播指示灯（点点）
						var docs = scrollPic.length - 1; //减1是类为mui-active的第一个点
						var oDoc = $("div.mui-indicator.mui-active");
						for(var i = 0; i < docs; i++) {
							oDoc.after("<div class='mui-indicator'></div>");
						};
					}
				}

			);
			//自定义一个方法批量替换制定的字符 
			function del_html_tags(str, reallyDo, replaceWith) {
				var e = new RegExp(reallyDo, "g"); //参数 reallyDo 是一个字符串，指定了正则表达式的模式或其他正则表达式,参数 "g" 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配
				words = str.replace(e, replaceWith); //str里的e换做replaceWith
				return words;
			}

			/*选项卡 ========*/
			mui.plusReady(function() {
				newSelect(); //调用选项卡方法  注：改选项卡是被抱在mui.plusReady(function() {})或mui.ready(function(){})
			});

			function newSelect() {
				var add = document.getElementById("add-tab");
				var wrapper = document.getElementById("scroll-wrapper");
				var width = $(document.body).width();
				add.addEventListener("tap", function() {
					console.log("更多")
				});
				$(wrapper).css("width", width - 60); //滚动包装容器减掉60像素，目的让加号有位置
				wrapper.classList.add("mui-scroll-wrapper"); //classList属性是返回元素的类名
				mui(wrapper).scroll({
					bounce: false //滚动条是否有弹力默认是true 
				});

				var mui_scroll = document.getElementById('scroll-wrapper');
				var a = mui_scroll.getElementsByTagName('a');
				var liset_div = $(".liset_div"); //内容

				for(var i = 0; i < a.length; i++) {
					a[i].index = i;
					a[i].addEventListener('tap', function() {
						for(var i = 0; i < a.length; i++) {
							liset_div[i].className = "liset_div hide";
						}
						liset_div[this.index].className = "liset_div show"
					})
				}
			}
			/*选项卡结束 ========*/
			
			$(".game_pic").on('tap',"img",function(){
				mui.openWindow({
					url:"game_company.html",
					id:"game_company.html",
				})
			})
		</script>
	</body>

</html>